<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :title="title"
    width="85%"
    top="0px"
    @close="doClose"
  >
    <div class="app-container">
      <div class="head-context" style="margin-top: 0px;">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card :body-style="{ padding: '0px' }" shadow="always">
              <el-form :model="schedule" :inline="true" label-width="auto" size="mini">
                <el-form-item label="主题:"><span>{{ schedule.scheduleSubject | ellipsis }}</span></el-form-item>
                <el-form-item label="部类:">
                  {{ showNameByValue(schedule.scheduleType, parent.getSelector().scheduleTypes) }}
                </el-form-item>
                <el-form-item label="档期分类:">
                  <span v-if="schedule.scheduleGroup !== null || schedule.scheduleGroup !== ''">
                    {{ showNameByValue(schedule.scheduleGroup, parent.getSelector().scheduleGroups) }}
                  </span>
                  <span v-else>
                    --
                  </span>
                </el-form-item>
                <el-form-item label="开始日期:">
                  {{ parseToString(new Date(schedule.effDate), 'yyyy-MM-dd') }}
                </el-form-item>
                <el-form-item label="结束日期:">
                  {{ parseToString(new Date(schedule.operationEndDate), 'yyyy-MM-dd') }}
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div style="padding-top:15px">
        <span style="padding-right:10px;">采购：
          <el-select v-model="params.buyerId" placeholder="请选择" size="mini" disabled style="width: 150px;">
            <el-option v-for="item in buyerIds" :key="item" :label="item" :value="item" />
          </el-select>
        </span>
        <span style="padding-right:10px;">线上条码：
          <el-input v-model="params.onlineUpcNbr" size="mini" placeholder="请输入" style="width: 150px;" clearable />
        </span>
        <span>状态：
          <el-select v-model="params.dataStatus" placeholder="请选择" size="mini" style="width: 150px;" clearable>
            <template v-for="item in getSelector().dataStatusList">
              <el-option v-if="item.itemListShow" :key="item.value" :label="item.name" :value="item.value" />
            </template>
          </el-select>
          <el-button size="mini" type="primary" style="margin-bottom:5px;" round @click="toQuery">查询</el-button>
        </span>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:1px;" round @click="toDowndloadStoreUpc">导出门店UPC</el-button>
        <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;" round @click="toDowndload">导出清单</el-button>
        <el-table
          ref="rule3Table"
          :data="data"
          :row-key="getRowKeys"
          stripe
          size="small"
          border
          style="width: 100%;"
          :header-cell-style="{ height: '0px', padding: '0px' }"
          :row-style="{height: '0px'}"
          :cell-style="{padding: '0px'}"
          :height="tableHeight"
          @row-click="rowClick"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
          @header-dragend="colChange"
        >
          <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" :width="colWidths.deptNbr?colWidths.deptNbr:70" />
          <el-table-column :show-overflow-tooltip="true" label="品类" prop="cateId" :width="colWidths.cateId?colWidths.cateId:70" />
          <el-table-column :show-overflow-tooltip="true" label="采购ID" prop="buyerId" :width="colWidths.buyerId?colWidths.buyerId:100" />
          <el-table-column :show-overflow-tooltip="true" label="线上条码" prop="onlineUpcNbr" :width="colWidths.onlineUpcNbr?colWidths.onlineUpcNbr:130" />
          <el-table-column :show-overflow-tooltip="true" label="线上商品名称" prop="onlineItemName" :width="colWidths.onlineItemName?colWidths.onlineItemName:140" />
          <el-table-column :show-overflow-tooltip="true" label="促销开始日期" prop="promotionStartDate" sortable :width="colWidths.promotionStartDate ? colWidths.promotionStartDate : 120">
            <template slot-scope="scope">
              <span>{{ parseToString(scope.row.promotionStartDate, 'yyyy-MM-dd') }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="促销结束日期" prop="promotionEndDate" sortable :width="colWidths.promotionEndDate ? colWidths.promotionEndDate : 120">
            <template slot-scope="scope">
              <span>{{ parseToString(scope.row.promotionEndDate, 'yyyy-MM-dd') }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="门店A状态校验" prop="dataStatus" :width="colWidths.dataStatus ? colWidths.dataStatus : 135">
            <template slot-scope="scope">
              <el-link type="warning" size="mini" @click="toViewStoreList(scope.row)">
                <span style="font-size: 12px;">
                  总数:{{ scope.row.countTotal !== null ? scope.row.countTotal : '-' }},
                  被过滤数:{{ scope.row.countNonAStatus !== null ? scope.row.countNonAStatus : '-' }}
                </span>
              </el-link>
            </template>
          </el-table-column>
          <itemStatus ref="itemStatus" :parent="currentObj" />
          <el-table-column :show-overflow-tooltip="true" label="价格/满减力度" prop="promotionPrice" :width="colWidths.promotionPrice?colWidths.promotionPrice:120" />
          <el-table-column :show-overflow-tooltip="true" label="发送门店" prop="sendStore" :width="colWidths.sendStore?colWidths.sendStore:130" />
          <el-table-column :show-overflow-tooltip="true" label="不发送门店" prop="omitSendStore" :width="colWidths.omitSendStore?colWidths.omitSendStore:130" />
          <el-table-column :show-overflow-tooltip="true" label="限购数量" prop="buyLimited" :width="colWidths.buyLimited?colWidths.buyLimited:100" />
          <el-table-column v-if="showOptionType" :show-overflow-tooltip="true" label="操作类型" prop="optionType" :width="colWidths.optionType?colWidths.optionType:100">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.optionType, getSelector().optionTypes) }}</span>
            </template>
          </el-table-column>
          <!--<el-table-column :show-overflow-tooltip="true" label="备注" prop="remark" :width="colWidths.remark?colWidths.remark:130" />-->
          <el-table-column :show-overflow-tooltip="true" label="最后更新人" sortable prop="updatedBy" :width="colWidths.updatedBy ? colWidths.updatedBy : 120" />
          <el-table-column :show-overflow-tooltip="true" label="更新时间" sortable prop="updatedTime" :width="colWidths.updatedTime ? colWidths.updatedTime : 135">
            <template slot-scope="scope">
              <span>{{ parseToString(scope.row.updatedTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="operation" align="left" fixed="right" width="185">
            <template slot-scope="scope">
              <el-button size="mini" type="text" style="margin-left:0px;" @click="toView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          :page-size="size"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
      <edit ref="edit" :parent="currentObj" />
      <storeList ref="storeList" />
    </div>
  </el-dialog>
</template>
<script>
import itemStatus from '@/views/olm/part/itemStatus'
import storeList from '@/views/olm/item-list/store-list'
import initData from '@/api/olm/initData'
import { parseToString } from '@/utils/datefromat'
import { getSelector } from '@/views/olm/item-list/js/edit.js'
import edit from '@/views/olm/item-list/edit'
import { showNameByValue } from '@/utils/selectUtil'
import { doDownload } from '@/api/olm/download'

export default {
  components: { edit, itemStatus, storeList },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 26) {
        return value.slice(0, 26) + '...'
      }
      return value
    }
  },
  mixins: [initData],
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      title: '',
      syncTime: [],
      ids: [],
      checkedRows: [],
      currentObj: this,
      tableHeight: window.innerHeight * 0.72,
      buyerIds: [],
      schedule: {}
    }
  },
  computed: {
    showOptionType: function() {
      return this.schedule !== null &&
      this.schedule.scheduleGroup !== undefined &&
      this.schedule.scheduleGroup != null &&
      this.schedule.scheduleGroup === 2 // 临时选品
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.$refs.rule3Table.doLayout()
        })
      }
    }
  },
  created() {
    this.$nextTick(() => {
    })
  },
  methods: {
    parseToString,
    getSelector,
    showNameByValue,
    toViewStoreList(row) {
      if (row) {
        var storeList = this.$refs.storeList
        storeList.findUpcStoreInfo(row.id)
        storeList.itemName = row.onlineItemName
        storeList.dialog = true
      }
    },
    // 查询栏重置触发
    resetForm() {
      this.param = { }
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API3 + '/olmList/queryAllPageList'
      return true
    },
    rowClick(row) {
      this.$refs.rule3Table.clearSelection(this.multipleSelection)
      this.$refs.rule3Table.toggleRowSelection(row, true)
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.param.sort = sortCol + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 查看
    toView(entity) {
      const edit = this.$refs.edit
      var json = JSON.stringify(entity)
      var copyEntity = JSON.parse(json)
      edit.entity = copyEntity
      edit.title = '查看'
      edit.currentOperate = 'VIEW'
      edit.scheduleSubject = this.schedule.scheduleSubject
      edit.schedule = this.schedule
      edit.dialog = true
      console.log('audit-list-toView')
    },
    toApproved() { // 审核通过

    },
    toDowndload() { // 下载清单
      this.$confirm('确认下载？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        var data = { scheduleId: this.schedule.id, buyerId: this.params.buyerId }
        doDownload('/olm-excel/excel/exportOlmListData', data, '清单文件.xlsx').then(_ => {
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    },
    toDowndloadStoreUpc() { // 下载门店UPC
      this.$confirm('确认下载？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        var data = { scheduleId: this.schedule.id, buyerId: this.params.buyerId }
        doDownload('/olm-excel/excel/exportOlmListStoreData', data, '门店UPC清单.zip').then(_ => {
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    },
    toAnalysis(entity) { // 分析
      // var selectSchedule = this.$refs.selectSchedule
      // selectSchedule.entity.buyerId = entity.buyerId
    },
    // 关闭
    doClose() {
      this.dialog = false
      this.schedule = {}
      this.params = {}
      this.data = []
      // this.parent.toQuery()
    }
  }
}
</script>
<style scoped>
 .head-context >>> .el-form-item--mini.el-form-item {
   margin-bottom: 0px;
   padding-bottom: 5px;
   padding-top: 5px;
 }
</style>
